.item {
  min-width: 15%;
  max-width: 20%;
  width    : 18%;


  .img-warp {
    position     : relative;
    border-radius: 3px;
    overflow     : hidden;

    .num-warp {
      position  : absolute;
      transform: translate3d(0px,-25px,0px);
      width     : 100%;
      background: rgba(0, 0, 0, 0.5);
      color     : white;
      font-size : 12px;
      padding   : 3px;
      opacity: 0.1;

      .num {
        color: white;
      }
    }

    img {
      border-radius: 3px;
      overflow     : hidden;
      width        : 100%;
    }

    .iconfonts {
      position: absolute;
      bottom: 5px;
      right: 10px;
      font-size: 30px;
      opacity: 0;
    }
  }



  .name {
    font-size         : 12px;
    color             : #666565;
    overflow          : hidden;
    text-overflow     : ellipsis;
    display           : -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
}


.item :hover .num-warp{
  transition: all 0.6s;
  opacity: 1;
  transform: translate3d(0px,-0px,0px);
}

.item :hover .iconfonts{
  transition: all 0.6s;
  opacity: 0.9;
}

